import React from 'react';
import './baidu.css';

class Game extends React.Component {
    
    render() {
        return (
            <div className="Add">
                <Top />
                <Searching />
                <Hotsearch />
            </div>
        );
    }
}

class Top extends React.Component {
    render() {
        return (
            <div className='Picture'>
                <img src='	https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png' alt='百度'></img>
            </div>
        )
    }
}
class Searching extends React.Component {
    render() {
        return (
            <div className='Search_box'>
                <input type="text"/>
                <div className='Baidu'>百度一下</div>
            </div>
        )
    }
}

class Hotsearch extends React.Component {
    state = {
        indexs: [0, 1, 2, 3, 4, 5],
        arr: ['开启新的奔赴', '胡鑫宇家属:遗体在学校后山粮库找到', '四川生育登记取消结婚限制', '人气足 市场旺 信心强', '胡鑫宇母亲：多人曾进粮库寻找过', '30多家中企排队申请在瑞士上市', '胡鑫宇母亲：多人曾进粮库寻找过llllll', '胡鑫宇母亲：多人曾进粮库寻找过', '胡鑫宇母亲：多人曾进粮库寻找过', '男生和女生初四相亲初八直接订婚', '胡鑫宇母亲：多人曾进粮库寻找过', '胡鑫宇母亲：多人曾进粮库寻找过', '胡歌曾说最伟大的职业就是父亲', '胡鑫宇母亲：多人曾进粮库寻找过', '官方人士：录音笔在深圳恢复数据', '胡鑫宇母亲：多人曾进粮库寻找过', '胡鑫宇母亲：多人曾进粮库寻找过', '胡鑫宇母亲：多人曾进粮库寻找过', '胡鑫宇母亲：多人曾进粮库寻找过', '胡鑫宇母亲：多人曾进粮库寻找过', '胡鑫宇母亲：多人曾进粮库寻找过', '郑州原市长履新 曾因特大暴雨被处分', '胡鑫宇母亲：多人曾进粮库寻找过', '胡鑫宇母亲：多人曾进粮库寻找过', '胡鑫宇母亲：多人曾进粮库寻找过', '胡鑫宇母亲：多人曾进粮库寻找过', '胡鑫宇母亲：多人曾进粮库寻找过', '胡鑫宇母亲：多人曾进粮库寻找过', '湖南一网吧凌晨变《狂飙》专场', '胡鑫宇母亲：多人曾进粮库寻找过']
    }
    fn1 = () => {
     this.setState({
        indexs:this.state.indexs.every(item => item > 18) ?  [0, 1, 2, 3, 4, 5] :this.state.indexs.map(item => item+6)
     })
    console.log('切换')
    }
    static getDerivedStateFromProps (nextProps,prevState){
        let newArr =[]
        if(nextProps.keys){
            newArr = prevState.srr.filter(item => item.includes(nextProps.keys))
            return{
                arr:newArr
            }
        }
        return null
    }
    render() {
        return (
            <div className='top_hotsearch'>
                <div className='top'>
                    <div className='top_left'>
                        百度热搜
                    </div>
                    <div className='top_right'  onClick={ this.fn1}>
                        换一换
                    </div>

                </div>
                <div className='button'>
                   {this.state.arr.length > 0 ? (<ul>
                    {this.state.arr.map((item,index) => {
                        return(
                            <li key={index}>
                                <span>
                                    {this.state.indexs[index] === 0 ?  (<img src="https://s1.ax1x.com/2023/02/02/pSroJyD.jpg" alt="百度" />) : this.state.indexs[index]}
                                </span>
                                <span>&nbsp;{this.state.arr[this.state.indexs[index]]}</span>
                            </li>
                        )
                    })}
                   </ul>) : (<p>暂无数据</p>)}
                </div>
            </div>
            
        )
    }
}
export default Game
 